<template>
	<page  ref='page'>
		<!-- 建材城 - type - list - page wwl -->
		<view class="page">
			<view class="top_box">
				<view class="search_box">
					<input type="text"  maxlength="20" v-model='title' confirm-typ="search" @confirm="page = 1;getList()" class="select_text2" :focus="isFocus" @focus='isFocus = true' @blur='isFocus = false'/>
					<view class="select_text1" v-if='!title && !isFocus' @click="isFocus = true">
						<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211213/moIgND2cnkrxJ7nCJvljsDhjGXdLT9Pj77rnPBP9.png" mode="scaleToFill" ></image>
						<text>搜索</text>
					</view>
				</view>
				<block v-if='tabList && tabList.length > 0 && isType == true'>
					<vgt-tab :list="tabList" @onValueChange="switchTab" color='#626262' bgc='#fff'></vgt-tab>
				</block>
			</view>
			<scroll-view  style='height:100%' enableBackToTop="true" scroll-y="true" @scrolltolower="loadMore">
				<view class="list_box">
					<block  v-if='total != 0'>
						<renovationShop v-for='(row,index) in list' :key='index' :source='source' :row='row' status='shop' type='buildingMaterialsCity' :duihuan='duihuan' :offer='offer'/>
						<loadingText :type="loading || page * size < total" />
					</block>
					<view  style='padding-top:200rpx' v-else-if="!loading">
						<empty  :status='2'/>
					</view>
				</view>
				<foot />
			</scroll-view>
		</view>
	</page>
</template>

<script>
	import  { getTabList , getShopList} from "./static/api.js"
	import vgtTab from "@/components/vgt-tab/vgt-tab.vue"
	import  renovationShop  from "@/components/renovation-shop.vue"
	export default {
		components: {
			vgtTab,renovationShop
		},
		data(){
			return{
				isFocus:false,
				title:'',
				loading:false,
				source:0,
				type:null,
				typeName:null,
				tabList:[],
				tabActive:0,
				list:[],
				page:1,
				size:10,
				total:0,
				cityId:'',
				offer:'',
				isType:true,
				jiacan:'',
				duihuan:0,
			}
		},
		watch: {
			currentAddress(x) {
				if (this.$store.state.currentArea && !this.$store.state.addressSelect) {
					this.$store.commit('setAddressSelect', {
						id: this.$store.state.currentArea.cityId,
						name: this.$store.state.currentArea.cityName
					})
				}
				this.page = 1
				this.getList()
			}
		},
		computed: {
			currentAddress() {
				return this.$store.state.currentArea
			}
		},
		methods: {
			async getTabInfo(){
				this.loading = true 
				uni.showLoading()
				try{
					var res = await getTabList({build_city_id:this.type})
					this.tabList = [{id: 0, name: "全部"},...res]
				}catch{
					this.loading = false
					uni.hideLoading()
				}
				await this.getList()
			},
			async getList(){
				this.loading = true;
				if(this.page == 1) uni.showLoading() 
				try{
					
					
					console.log(this.getters.addressSelect.id,'用户地址ID');
					
					if(this.jiacan){						
						var res = await getShopList({
							// type:this.jiacan,
							jiancai:this.jiacan,
							page:this.page,limit:this.size,
							build_city_nav_id:this.tabActive,
							build_city_id:this.type,
							title:this.title,
							// zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',
							zone_id:this.getters.addressSelect ? this.getters.addressSelect.id : '',
							user_id: this.offer == 2  && this.$store.state.chat_to ? this.$store.state.chat_to.id : ''
						})
					}else{
						var res = await getShopList({
							jiancai:this.jiacan,
							page:this.page,limit:this.size,
							build_city_nav_id:this.type,
							build_city_id:this.tabActive,
							title:this.title,
							// zone_id:this.$store.state.currentArea ? this.$store.state.currentArea.cityId : '',
							zone_id:this.getters.addressSelect ? this.getters.addressSelect.id : '',
							user_id: this.offer == 2  && this.$store.state.chat_to ? this.$store.state.chat_to.id : ''
						})
					}
					console.log(res,'店铺列表')
					this.list =  this.page == 1 ? res.list : [...this.list,...res.list]
					this.total = res.count
					this.loading = false
					if(this.page == 1) uni.hideLoading() 
				}catch{
					this.loading = false
					uni.hideLoading()
				}
			},
			switchTab(x){
				this.tabActive = x.currentInd
				this.page = 1
				this.total = 0
				this.size = 10
				this.list = []
				this.getList()
			},
			loadMore(){
				if( this.page * this.size >= this.total ||  this.loading) return
				this.page ++ 
				this.getList()
			},
		},
		onShow(){
			var option = this.$global.$editUploadBack(4, 'buildingMaterialClassificationsCityLike')
			if(option && option.id && this.list.findIndex(x=>x.id == option.id) != -1){
			var index = this.list.findIndex(x=>x.id == option.id)
				if(index != -1){
					this.list[index].is_like = this.list[index].like > option.like ? 2 : 1
					this.list[index].like = option.like
				}
			}
		},
		onLoad(params){
			if(params.jiacan) this.jiacan = params.jiacan;
			if(params.offer) this.offer = params.offer
			if(params.isType) this.isType = params.isType
			if(params.source) this.source = params.source
			this.type = params.type
			if(params.typeName){
				this.typeName =  decodeURIComponent(params.typeName)
				uni.setNavigationBarTitle({
				    title: this.typeName
				});
			}
			if(params.duihuan != undefined){
				this.duihuan = params.duihuan;
				console.log(this.duihuan, '角色判断');
				
			}
	        this.getTabInfo()
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		min-height: 100%;
		display: flex;
		background-color:#fff;
	}
	.page {
		background-color: #fff;
	    flex: 1;
		display: flex;
	    flex-direction: column;
	    overflow: hidden;
		height: 100vh;
	  }
	  .top_box{
		  padding:  30rpx 36rpx 20rpx;
		  width: 100% ;
		  box-sizing: border-box;
		  background-color: #fff;
	  }
	  .list_box{
		  padding:  0 36rpx;
		  width: 100% ;
		  box-sizing: border-box;
		  min-height: 60vh;
	  }
	  .search_box{
	  	position: relative;
		.select_text2{
			width: 100%;
			height: 64rpx;
			background: #f6f7fb;
			border-radius: 32rpx;
			font-size: 28rpx;
			line-height: 64rpx;
			color:#333;
			text-align: center;
			// padding: 0 26rpx ;
			box-sizing: border-box;
		}
		.select_text1{
			font-size: 28rpx;
			color:#A4A4A4;
			position: absolute;
			left: 50%;
			top:50%;
			transform: translate(-50%,-50%);
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			
		}
	  }
	 
	  
</style>
